<template>
	<view class="page">
		<!-- 头部背景图 -->
		<view class="pageTopImg" :style="'padding-top:' + touHeight + 'px'"></view>
		<!-- 顶部菜单 -->
		<view class="topHeader" :style="'height:' + touHeight +'px;'">
			<view class="fanhuiUp" @tap="toFanhuiUp"></view>
			<view class="pageTitle">全部订单</view>
		</view>
		<!-- 订单列表筛选 -->
		<view class="order_top" :style="'top:' + touHeight +'px;'">
			<view class="xuan_box">
				<view class="order_list" :class="{'active':status==0}" @tap='on_order' data-cate="0">全部</view>
				<view class="order_list" :class="{'active':status==1}" @tap='on_order' data-cate="1">已报名</view>
				<view class="order_list" :class="{'active':status==2}" @tap='on_order' data-cate="2">进行中</view>
				<view class="order_list" :class="{'active':status==4}" @tap='on_order' data-cate="4">待结算</view>
			</view>
			<view class="jump_search" @tap="toSubmit"><image :src="URL+'/JD_wx_img/search_img4.png'" mode="widthFix"></image></view>
		</view>
		<view class="page_content" :style="'padding-top:' + pageTop + 'px'">
			<view class="work_dingdan" @tap="toDetails" v-for="(item,index) in productList" :data-id="item.id" :data-key="index" :style="item.show==1?'display:block;':'display:none;'">
				<view class="work_top">
					<view class="name">订单号<view class="num">{{item.number}}</view></view>
					<view class="state" :class="item.status==1||item.status==4?'state01':'state02'">{{item.status_text}}</view>
				</view>
				<view class="dingdan_list">
					<view class="list_top">
						<view class="name">{{item.type_text}}</view>
						<view class="price">¥<view class="bold">{{item.price}}</view>/小时</view>
					</view>
					<view class="dingdan_xinxi orange" style="background: url(https://jianzhi.huanyuweizhi.com/JD_wx_img/xinxi_img01.png) left center no-repeat;">{{item.arrival}}</view>
					<view class="dingdan_xinxi" style="background: url(https://jianzhi.huanyuweizhi.com/JD_wx_img/jiu_name_img.png) left center no-repeat;">{{item.name}}</view>
					<view class="dingdan_xinxi" style="background: url(https://jianzhi.huanyuweizhi.com/JD_wx_img/xinxi_img02.png) left center no-repeat;">{{item.location}}</view>
				</view>
				<view class="dingdan_bottom">
					<view class="anniu">查看详情</view>
				</view>
			</view>
			<!-- 加载效果 -->
			<view class='loading_text' :hidden="noMre">没有更多了</view>
			<view class="loading_text" :hidden="loading">加载中...</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				touHeight: 0,
				pageTop: 0,
				//域名拼接
				URL: app.globalData.URL,
				noMre: true,
				loading: false,
				//用于渲染页面的数组
				productList: [],
				//默认页数
				page: 1,
				//每页展示条数
				list_rows: 5,
				status:0,//默认订单状态
			}
		},
		onLoad(options){
			var that = this;
			//自定义头部高度
			app.customNav()
			that.touHeight = app.touHeight + 5//搜索栏距离顶部高度
			var query = wx.createSelectorQuery();
			query.select('.order_top').boundingClientRect()
			query.exec(function (res) {
				that.pageTop = that.touHeight + res[0].height
			})
			
			//默认加载数据
			var status = that.status;//订单状态
			var page = that.page//当前页数
			var list_rows = that.list_rows//每页展示条数
			that.getproinfo(status,page,list_rows,that)
			
			//第一次进入要清空不然报错
			wx.setStorageSync('collectKey','');
		},
		
		//每次进入都执行
		onShow(){
			var that = this;
			var collectKey = uni.getStorageSync('collectKey');
			if(collectKey!=''){
				var xianshiList = that.productList;
				xianshiList[collectKey].show = 2;//改变view的显示值
				that.productList = xianshiList;//重组数组
			}
		},
		
		/**
		* 页面上拉触底事件的处理函数
		*/
		onReachBottom(){
			var that = this;
			//触底加载数据
			var status = that.status;//订单状态
			var page = that.page//当前页数
			var list_rows = that.list_rows//每页展示条数
			page++;
			that.page = page//打印page
			var page = that.page//触底后的页数触底一次+1
			that.getproinfo(status,page,list_rows,that)
		},
		
		methods: {
			//按钮提交搜索
			toSubmit:function(e){
				uni.navigateTo({
				    url: '/pages/my_work_search/my_work_search',
				})
			},
			
			//订单状态筛选
			on_order:function(e){
				var that = this;
				that.status = e.currentTarget.dataset.cate;
				
				//默认加载数据
				that.productList = [];//清空数组
				var status = that.status;//订单状态
				that.page = 1;
				var page = that.page//当前页数
				var list_rows = that.list_rows//每页展示条数
				that.getproinfo(status,page,list_rows,that)
			},
			
			//返回上一级
			toFanhuiUp:function(){
				uni.navigateBack({
				    delta: 1
				})
			},
			
			//跳转到详情
			toDetails:function(e){
				var order_id = e.currentTarget.dataset.id;
				var key = e.currentTarget.dataset.key;
				uni.navigateTo({
				    url: 'order_details/order_details?order_id='+order_id+'&key='+key,
				});
			},
			
			//岗位列表函数封装
			getproinfo(status,page,list_rows,that){
				var that = this;
			    uni.request({
					url: app.globalData.URL + '/api/v1/User/order?status='+status,
					method: 'get',
					header:{
						token: uni.getStorageSync('token')
					},
					data:{
						page: page,
						list_rows: list_rows,
					},
					success: function (res) {
						var productList = that.productList;
						///没有数据的时候
						if(res.data.data.data.length < 5){
							that.noMre = false
							that.loading = true
						}else{
							that.noMre = true
							that.loading = false
						}
						//有数据的时候循环将结果集追加到数组后面
						for (var i = 0; i < res.data.data.data.length; i++) {
							productList.push(res.data.data.data[i]);
						}
						that.productList = productList
					},
					fail: function (res) {
					  console.log(res);
					},
				});
			}
		}
	}
</script>

<style>
	.work_dingdan .state{
		margin-top: 22rpx;
		margin-right: 20rpx;
	}
	.work_top .name{
		color: #888888;
	}
	.work_top .name .num{
		font-weight: normal;
		display: inline-block;
		margin-left: 10rpx;
	}
	.page_content{
		padding-bottom: 60rpx;
	}
</style>
